<template>
  <div>
    <nav class="mui-bar mui-bar-tab">
      <a class="mui-tab-item" :class="{'mui-active': tabBar == 'home' }" @tap="jump('/')">
        <span class="mui-icon icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" :class="{'mui-active': tabBar == 'category' }" @tap="jump('/category')">
        <span class="mui-icon icon-category"></span>
        <span class="mui-tab-label">分类</span>
      </a>
      <a class="mui-tab-item" :class="{'mui-active': tabBar == 'classroom' }" @tap="jump('/classroom')">
        <span class="class mui-icon icon-class"></span>
        <span class="mui-tab-label">课堂</span>
      </a>
      <a class="mui-tab-item" :class="{'mui-active': tabBar == 'mine' }" @tap="jump('/mine')">
        <span class="mui-icon icon-person"></span>
        <span class="mui-tab-label">我的</span>
      </a>
    </nav>
  </div>
</template>

<script>
  import {Tabbar, TabItem} from 'mint-ui';
  import { UPDATE_TABBAR } from "../../store/mutation-types";

  export default {
    name: "Footer",
    components: {Tabbar, TabItem},
    computed: {
      tabBar(){
        return this.$store.state.tabBar || 'home'
      }
    },
    methods: {
      jump(url){
        this.$router.push(url);
      }
    }
  }
</script>

<style scoped>
  a {
    padding: 0;
  }
  .class:before {
    font-size: 0.5rem !important;
  }
  .mui-bar {
    background-color: #fff;
    box-shadow: none;
    border-top: 1px solid #c8c7cc;
    height: 1rem;
    bottom: 0 !important;
  }

  .mui-bar-tab .mui-tab-item {
    padding-top: 0;
  }

  .mui-bar-tab .mui-tab-item .mui-icon {
    width: 100%;
    height: 0.6rem;
    line-height: 0.65rem;
  }

  .mui-bar-tab .mui-tab-item .mui-icon:before {
    font-size: 0.5rem;
  }

  .mui-bar-tab .mui-tab-item .mui-tab-label {
    font-size: 0.2rem;
  }
</style>
